<template>
  <div>
    <nav class="fixed top-0 left-0 right-0 h-16 z-50 bg-white/95 backdrop-blur-md ">
      <div class="max-w-7xl mx-auto px-4 flex items-center justify-between h-full">
        <!-- 左侧：Logo区域 -->
        <div class="flex items-center space-x-3">
          <div class="flex items-center space-x-3">
            <div class="w-10 h-10 rounded-xl overflow-hidden flex items-center justify-center shadow-lg bg-gradient-to-br from-[#a2d5c6] to-[#87CEEB] transform hover:scale-105 transition-all duration-300">
              <img src="/web.png" alt="Logo" class="h-full w-full object-cover">
            </div>
            <div class="hidden sm:block">
              <h1 class="text-xl font-bold bg-gradient-to-r from-[#54ddb4ff] to-[#8b63e9ff] bg-clip-text text-transparent">
                青柠社
              </h1>
              <p class="text-xs text-gray-500 -mt-1">Campus Community</p>
            </div>
          </div>

          <!-- 菜单按钮 -->
          <button 
            class="p-2.5 rounded-xl hover:bg-[#a2d5c6]/10 transition-all duration-200 text-[#62dbb7ff] hover:scale-105 active:scale-95"
            @click="toggleMenu"
          >
            <i class="fas fa-bars text-lg"></i>
          </button>
        </div>

        <!-- 中间：搜索区域 -->
        <div class="flex-1 max-w-2xl mx-6">
          <div class="flex items-center space-x-3">
            <div class="relative flex-1">
              <div class="relative flex items-center bg-gray-50/80 rounded-2xl border border-gray-200/50 hover:border-[#a2d5c6]/50 focus-within:border-[#a2d5c6] focus-within:bg-white transition-all duration-300 shadow-sm hover:shadow-md">
                <!-- 左侧搜索图标 -->
                <div class="absolute left-4 flex items-center justify-center w-4 h-4">
                  <i class="fas fa-search text-[#a2d5c6] text-sm"></i>
                </div>
                
                <!-- 搜索输入框 -->
                <input
                  type="text"
                  v-model="searchQuery"
                  placeholder="搜索帖子、社区、用户..."
                  class="w-full pl-12 pr-12 py-3 bg-transparent rounded-2xl text-sm text-gray-700 placeholder-gray-400 focus:outline-none"
                  @keyup.enter="handleSearch"
                />
                
                <!-- 清除按钮 -->
                <button
                  v-if="searchQuery"
                  @click="clearSearch"
                  class="absolute right-3 flex items-center justify-center w-6 h-6 rounded-full hover:bg-gray-200/80 transition-all duration-200"
                >
                  <i class="fas fa-times text-gray-400 text-xs"></i>
                </button>
              </div>
            </div>
            
            <!-- 搜索按钮 -->
            <button
              @click="handleSearch"
              class="flex items-center justify-center px-4 py-3 bg-gradient-to-r from-[#62dbb7ff] to-[#87CEEB] text-white rounded-2xl hover:from-[#87CEEB] hover:to-[#976df7] transition-all duration-300 shadow-sm hover:shadow-md transform hover:scale-105 active:scale-95 whitespace-nowrap"
            >
              <i class="fas fa-search text-sm mr-2"></i>
              <span class="hidden sm:inline text-sm font-medium">搜索</span>
            </button>
          </div>
        </div>

        <!-- 右侧：功能区域 -->
        <div class="flex items-center space-x-8">
          <!-- 未登录状态：登录按钮 -->
          <button
            v-if="!$store.state.token"
            @click="login"
            class="px-6 py-2.5 bg-gradient-to-r from-[#62dbb7ff] to-[#87CEEB] text-white rounded-xl font-medium hover:from-[#62dbb7ff] hover:to-[#976df7] transition-all duration-300 shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 flex items-center space-x-2"
          >
            <i class="fas fa-sign-in-alt"></i>
            <span class="hidden sm:inline">登录</span>
          </button>

          <!-- 已登录状态：功能按钮组 -->
          <template v-if="$store.state.token">
            <!-- 消息中心 -->
            <button
              class="relative p-3 rounded-xl hover:bg-[#fa3f5bff]/10 transition-all duration-200 text-[#fa3f5bff] hover:scale-105 active:scale-95 group"
              @click="openMessages"
            >
              <i class="fas fa-bell text-lg"></i>
              <span class="absolute -top-1 -right-1 w-5 h-5 bg-gradient-to-r from-[#e77182ff] to-[#976df7] text-white text-xs rounded-full flex items-center justify-center font-bold animate-pulse">
                3
              </span>
              <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
                消息通知
              </div>
            </button>

            <!-- 历史记录 -->
            <button
              class="relative p-3 rounded-xl hover:bg-[#fcbb3aff]/10 transition-all duration-200 text-[#fcc14aff] hover:scale-105 active:scale-95 group"
              @click="openHistory"
            >
              <i class="fas fa-history text-lg"></i>
              <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
                浏览历史
              </div>
            </button>

            <!-- 发帖按钮 -->
            <button
              @click="openPostEditor"
              class="px-4 py-2.5 bg-gradient-to-r from-[#FFB6C1] to-[#976df7] text-white rounded-xl font-medium hover:from-[#976df7] hover:to-[#62dbb7ff] transition-all duration-300 shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 flex items-center space-x-2"
            >
              <i class="fas fa-plus"></i>
              <span class="hidden sm:inline">发帖</span>
            </button>

            <!-- 用户头像 -->
            <UserDropdown />
          </template>
        </div>
      </div>
    </nav>

    <!-- 发帖编辑器 -->
    <PostEditor v-if="isPostEditorOpen" @close="closePostEditor" />

  </div>
</template>

<script>
import UserDropdown from "@/components/UserDropdown.vue";
import PostEditor from "@/components/PostEditor.vue";

export default {
  name: "TopNav",
  components: { UserDropdown, PostEditor },
  data() {
    return {
      isPostEditorOpen: false,
      showMobileMenu: false,
      searchQuery: '',
      user: {
        name: "新用户1768",
        avatar: "https://picsum.photos/200/200",
        isVip: false
      }
    };
  },
  mounted() {
    this.user.name = this.$store.state.name || "新用户1768";
    if (this.$store.state.avatar) {
      this.user.avatar = this.$store.state.avatar;
    }
    this.user.isVip = this.$store.state.isVip;
  },
  methods: {
    openPostEditor() {
      if (!this.$store.state.token) {
        this.$toast.show('请先登录', 'error');
        return;
      }
      this.isPostEditorOpen = true;
    },
    closePostEditor() {
      this.isPostEditorOpen = false;
    },
    login() {
      this.$router.push('/login');
    },
    toggleMenu() {
      this.showMobileMenu = !this.showMobileMenu;
    },
    handleSearch() {
      if (this.searchQuery.trim()) {
        console.log('搜索:', this.searchQuery);
        // 这里可以添加搜索逻辑
      }
    },
    clearSearch() {
      this.searchQuery = '';
    },
    openMessages() {
      console.log('打开消息中心');
    },
    openHistory() {
      console.log('打开历史记录');
    }
  }
};
</script>

<style scoped>

/* 按钮点击反馈 */
@keyframes buttonPress {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* 通知徽章动画 */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* 毛玻璃效果增强 */
@supports ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter: blur(20px))) {
  .backdrop-blur-md {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}
</style>